<template>
    <div id='iTableForm' class='i_table_form'>
        <table class="i-table" border="1" cellspacing="0" cellpadding="0">
            <template v-for="(item,index) in config.constom">
                <tr class="i-table-tr" v-for="(trItem,trIndex) in item.row">
                    <template v-for="chItem in trItem">
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" class="i-table-label" v-if="chItem.type=='label'" :style="chItem.style">{{chItem.label}}</td>
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" :class="chItem.isClass==''?'i-table-content':chItem.isClass" v-else-if="chItem.type=='input'">
                            <Input :readonly="chItem.readonly" v-model="config.bindData[chItem.key]" :placeholder="chItem.placeholder" :border="chItem.border"></Input>
                        </td>
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" :class="chItem.isClass==''?'i-table-content':chItem.isClass" v-else-if="chItem.type=='select'">
                            <Select :disabled="chItem.disabled" :placeholder="chItem.placeholder" v-model="config.bindData[chItem.key]" filterable allow-create>
                                <Option v-for="selectItem in config.data[chItem.data]" :value="selectItem.value" :key="selectItem.value">{{ selectItem.label }}</Option>
                            </Select>
                        </td>
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" :class="chItem.isClass==''?'i-table-content':chItem.isClass" v-else-if="chItem.type=='datePicker'">
                            <DatePicker @on-change="datePickerChange($event,chItem.key)" :format="chItem.format" :value="config.bindData[chItem.key]" :disabled="chItem.disabled" :type="chItem.dataType" :placeholder="chItem.placeholder" :border="chItem.border"></DatePicker>
                        </td>
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" :class="chItem.isClass==''?'i-table-content i-detial':chItem.isClass" v-else-if="chItem.type=='detial'">
                            <template v-if="chItem.select">
                                <span style="padding:0 0 0 15px">{{$select[chItem.select].obj[config.bindData[chItem.key]]}}</span>
                                <span style="float:right;margin-right:10px">
                                    <Icon :type="chItem.icon" />
                                </span>
                            </template>
                            <template v-else>
                                <span style="padding:0 0 0 15px">{{config.bindData[chItem.key]}}</span>
                                <span style="float:right;margin-right:10px">
                                    <Icon :type="chItem.icon" />
                                </span>
                            </template>
                        </td>
                        <td :rowspan="chItem.rowspan" :colspan="chItem.colspan" :class="chItem.isClass==''?'i-table-content':chItem.isClass" v-else-if="chItem.type=='components'">
                            <component :is="chItem.component.name" :option="chItem.component.option" :data="chItem.component.data" @setBindData="setBindFroKey" :vModel="config.bindData" :bindKey="chItem.key" />
                        </td>
                    </template>
                </tr>
            </template>
        </table>
    </div>
</template>
<script>
import iTr from './tr.vue'
export default {
    name: '',
    props: ['config'],
    data() {
        return {
        };
    },
    components: {
        'i-tr': iTr
    },
    computed: {},
    beforeMount() { },
    mounted() {
    },
    methods: {
        datePickerChange(date,key){
            this.config.bindData[key] = date
        },
        setBindFroKey(key, data) {
            this.config.bindData[key] = data
        }
    },
    watch: {}
}
</script>
<style lang="less" scoped>
@import "../../../styles/table.less";
.i-table-content {
    height: 48px;
    line-height: 48px;
    min-width: 48px;
}
.i-table-label {
    text-align: right;
}
.i-detial {
    background: #fff;
}
.i_input {
    /deep/ .ivu-input {
        height: 96px !important;
    }
}
</style>